<template>
	<view>
		<view class="titleBtn d-flex-yCenter jfy-center mg-30" @tap='listChange'>
			<text class="mr-20">{{typeArr[typeLength]}}</text>
			<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="d-flex-yCenter jfy-center" style="margin-top: 300rpx;" v-if="!oderList.length && status">
			<image style="width: 493rpx; height: 288rpx;" src="../../static/icon/null.png" mode=""></image>
		</view>
		<template v-else>
			<view class="px-30 py-20  mb-30" :class="i+1 == oderList.length?'':'border-b'" v-for="(v,i) in oderList"
				:key='v.id'>
				<view class=" oderList mb-20" v-for="(item,index) in v.order_list" :key='item.order_no'>
					<view class="d-flex jfy-sb">
						<text class="text-overflow2">{{item.goods_title}}</text>
						<image class="icon" src="../../static/icon/shang.png" mode=""></image>
					</view>
					<view class="font-24 mt-10" style="color: #C1C1C1;">{{$tool.time(v.addtime*1000,'YMDHMS')}}</view>
					<view class="font-24 mt-10 Price-color">￥{{item.price_real}}/{{item.number_goods}}件</view>
					<view class="font-28 mt-20">{{statusType(v)}}</view>
					<view class="mt-30">
						<image @tap.stop='$tool.previmg(item.goods_logo)' class="log" :src="item.goods_logo"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="d-flex flex-d font-24">
					<view class="">
						<text>快递费：</text>
						<text class="Price-color">{{v.price_express}}</text>
					</view>
					<view class="mt-10">
						<text>总金额：</text>
						<text class="Price-color">{{v.price_total}}</text>
					</view>
				</view>
				<view class="text-al-right d-flex aling-centen jfy-end mt-20">
					<navigator url="#" hover-class="none" @tap='querenshouhuo(v)' class="btn" v-if="v.status==4">确认收货
					</navigator>
					<navigator url="#" hover-class="none" @tap='showhou(v)' class="btn" v-if="v.status>2">售后</navigator>
					<navigator url="#" hover-class="none" @tap='deleteOrder(i,v.order_no)' class="btn"
						v-if="v.pay_state==0 && v.status==0">删除订单</navigator>
					<navigator url="#" hover-class="none" @tap='payGoods(v.order_no)' class="btn"
						v-if="v.pay_state == 0 && v.status != 0">付款</navigator>
					<button :data-prop='{pintuan_id:v.pintuan_id,cid:v.goods_id}' open-type='share' hover-class="none"  class="button btn"
						v-if='v.is_pintuan==1 && v.status==3 && v.pintuan_status==1 && v.refund_state==0'>邀请好友参团</button>
					<navigator :url="'/goodsPackage/order_details/order_details?order_no='+v.order_no"
						hover-class="none" class="btn">订单详情</navigator>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	// import {mapGetters} from 'vuex'
	import {
		http_userorder_lst,
		http_userorder_delete,
		http_userorder_receive
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				status: false,
				page: 1,
				last_page: 0,
				typeLength: 0,
				typeArr: ['全部订单', '待付款', '待发货', '待收货'],
				oderList: [],
			}
		},
		computed: {
			// ...mapGetters(['uname']),
		},
		onShow() {
			this.page = 1
			this.getOderList()
		},
		onLoad(opens) {
			this.typeLength = opens.type
			if (!this.userMD.getToken(true)) return
		},
		methods: {
			// 确认收货
			querenshouhuo(v) {
				http_userorder_receive({
					data: {
						order_no: v.order_no
					}
				}).then(res => {
					this.page = 1
					this.$tool.showToast('收货成功',true)
					setTimeout(()=>{
						this.getOderList()
					},800)
				})
			},
			// 售后
			showhou(e) {
				console.log(e);
				uni.navigateTo({
					url: '/goodsPackage/after-saleService/after-saleService?order_no=' + e.order_no
				})
			},
			// 删除订单
			deleteOrder(index, v) {
				http_userorder_delete({
					data: {
						order_no: v
					}
				}).then(res => {
					this.$tool.showToast('删除成功', true)
					this.oderList.splice(index, 1)
				})
			},
			payGoods(e) {
				this.wxPayment({
					order_no: e,
					success: res => {
						this.$tool.showToast('支付成功', 1)
						this.page = 1
						this.getOderList()
					},
					fail: err => {
						uni.showModal({
							title: '提示',
							content: '支付失败，是否重新支付',
							success: (res) => {
								if (res.confirm) {
									this.payGoods(e)
								}
							}
						});
					}
				})
			},
			statusType(e) {
				if (e.refund_state == 1) {
					return '售后处理中'
				}
				if (e.refund_state == 2) {
					return '已退款'
				}
				if (e.evaluate_state == 1) {
					return '订单已完成'
				}
				if (e.pay_state == 0 && e.status != 0) {
					return '等待用户付款'
				}
				if (e.pay_state == 0 && e.status == 0) {
					return '订单已取消'
				}
				if (e.status == 3) {
					return '待发货'
				}
				if (e.status == 4) {
					return '待收货'
				}
				if (e.status == 5) {
					return '已完成'
				}

				return '异常状态'
			},
			listChange() {
				uni.showActionSheet({
					itemList: this.typeArr,
					success: (res) => {
						if (res.tapIndex == this.typeLength) return
						this.typeLength = res.tapIndex
						this.page = 1
						this.getOderList()
					},
				});
			},
			getOderList(type) {
				let data = {
					limit: 10,
					page: this.page,
				}
				if (this.typeLength > 0) {
					data.status = parseFloat(this.typeLength) + 1
				}
				http_userorder_lst({
					data
				}).then(res => {
					this.status = true
					this.last_page = res.data.last_page
					type ? this.oderList = this.oderList.concat(res.data.data) : this.oderList = res.data.data
					console.log(res);
				})
			}
		},
		onReachBottom() {
			if (this.page == this.last_page || this.last_page == 0) return
			this.page++
			this.getOderList(true)
		},
		onShareAppMessage(res) {
			console.log(res);
			if(res.from=='button'){
				let prop=res.target.dataset.prop
				let data= {
					title: '海量秒杀，拼团商品等你来拿',
					path: '/pages/prot_details/prot_details?cid=' + prop.cid + '&activity_id='+prop.pintuan_id+'&scene=' + uni.getStorageSync('hk_userID'),
					imageUrl: '',
					desc: '',
					content: '活动正在火热进行中，快来一起参与吧！'
				}
				console.log(data);
				return data
			}
		}
	}
</script>

<style lang="scss">
	.titleBtn {
		width: 200rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 2rpx solid #000000;
		border-radius: 12rpx;
	}

	.oderList {
		.icon {
			width: 20rpx;
			height: 20rpx;
		}

		.log {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
		}
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.btn {
		box-sizing: border-box;
		display: inline-block;
		padding: 8rpx 30rpx;
		border-radius: 12rpx;
		background: $color-zt;
		color: #fff;
		font-size: 28rpx;
		margin-left: 30rpx;
	}
</style>
